// 打包 webpack -w
//启动服务器 webpack serve 
let { VueLoaderPlugin } = require('vue-loader')
let HtmlWebpackPlugin = require('html-webpack-plugin') //模板渲染index.html
let miniCssExtractPlugin = require('mini-css-extract-plugin') //拆分css
let optimizeCssAssets = require('optimize-css-assets-webpack-plugin') //拆分css压缩
let path = require('path')
module.exports = {
    entry: "./src/main.js",
    output: {
        // filename: 'js/[name].[hash].js', //输出文件名称
        filename: 'js/[name].js', //输出文件名称
        publicPath: '/'
    },
    resolve: {
        alias: {
            "@": path.join(__dirname, 'src'),
            "vue&": "vue/dist/vue.js",
            "@views": path.join(__dirname, 'src/views'),
        },
        extensions: ['.js', '.vue']
    },

    // 配置服务器
    devServer: {
        port: 9999,
        open: false, //是否自动打开浏览器
        // 静态资源
        static: {
            directory: path.join(__dirname, "/public"),
            publicPath: "/static",//公共路径
            // serveIndex: true,//serveIndex中间件在查看没有index.html文件。
        },
        client: {
            logging: 'error',//只打印报错，其实只要这个配置就好了
            overlay: {  //有报错发生，直接覆盖浏览器视窗，显示错误
                errors: true,
                warnings: false,
            },
        },
        proxy: {
            // 开发环境,配置跨域    
            '/api': {
                target: 'http://localhost:8888',
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    '^/api': ''
                }
            },
        },
    },
    // mode: 'production',
    mode: 'development',
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            // miniCssExtractPlugin.loader, 在 style-loader后添加 b不要 style-loader
            use: [miniCssExtractPlugin.loader, 'css-loader']
        },
        // 一定要使用 css-loader style-loader 否则 vue文件使用 样式会报错
        {
            test: /\.scss$/,
            use: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader',
            // 配置全局变量 使用style-resources-loader配置
            // {
            //     loader: 'style-resources-loader',
            //     options: {
            //         patterns: [path.resolve(__dirname, "src/assets/css/test.scss")]
            //     }
            // },
            // 或者使用sass-resources-loader配置
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [path.resolve(__dirname, "src/assets/css/test.scss")]
                }
            }
            ]
        },
        // 一定要使用 css-loader style-loader 否则 vue文件使用 样式会报错
        {
            test: /\.less$/,
            use: [miniCssExtractPlugin.loader, 'css-loader', 'less-loader', {
                // 配置全局变量 style-resources-loader下面的options为options.patterns
                loader: 'style-resources-loader',
                options: {
                    // style-resources-loader 用patterns表示路径
                    patterns: [path.resolve(__dirname, "src/assets/css/public.less")]
                }
            }]
        },
        {
            test: /\.vue$/,
            use: ['vue-loader']
            //拆分css的以前版本需要配置 这个
            // use: [{
            //     loader: 'vue-loader',
            //     options: {
            //         extractCss: true,
            //     }
            // }],
        },
        // 图片加载机 file-loader url-loader
        {
            test: /\.(jpg|png|jpeg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[contenthash].[ext]', //打包后输出文件名
                        outputPath: 'img',//打包后输出目录
                        esModule: false //关闭es模块语法 解决css背景图片不显示问题
                    }
                }
            ],
            type: 'javascript/auto' //解决css背景图片不显示问题

        },
        // 视频加载
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[contenthash].[ext]',
                        outputPath: 'video',
                    }
                }
            ],
        }
        ]
    },
    // 插件
    plugins: [
        new VueLoaderPlugin(), //vue-loader插件
        new optimizeCssAssets(),//打包压缩css
        new miniCssExtractPlugin({
            // filename: 'css/[hash].css'
            filename: 'css/style.css'
        }), //vue-loader插件
        new HtmlWebpackPlugin({
            // 模板文件与 vue-cli public文件夹下面的index.html功能相同
            template: './public/index.html',
            title: "webpack配置", //页面title
            inject: true,
            favicon: './public/favicon.ico', //配置logo
            hash: false,//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
        })
    ],
    optimization: {
        runtimeChunk: 'single',

        splitChunks: {
            chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
            maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
            minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
            maxSize: 60000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
            cacheGroups: {
                // js分割命名
                nodeSplit: {
                    test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
                    priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
                    // name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
                    //     const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                    //     return `npm_js_${packageName}`
                    // },
                    name: "npm_"
                },
            },
        }
    }
}